/*
运单管理页面

*/
<template>
  <div class="app-page" :class="{ 'header-hidden': !isHeaderVisible }">
    <!-- Mobile toggle for main header -->
    <div v-if="isMobile" class="mobile-header-toggle-button">
      <el-button
        size="mini"
        circle
        :icon="isHeaderVisible ? 'el-icon-arrow-up' : 'el-icon-menu'"
        @click="isHeaderVisible = !isHeaderVisible"
        title="切换操作菜单"
      />
    </div>

    <!-- 操作菜单区 -->
    <my-header>
      <el-button type="primary" @click="handleAdd">添加</el-button>
      <el-button type="primary" @click="handleBeforeUpdate" v-repeat-click style="display: none;">修改</el-button>
      <el-button @click="handleUploadExcel('批量添加修改运单', 'BATCH_ADD_UPDATE', workOrderExcelAddOrUpdate, true)"
                 type="primary">
        批量添加修改
      </el-button>
      <el-button @click="handleUploadExcel('根据单号打印运单', 'PRINT_ORDER', workOrderExcelPrint, true)">
        根据单号打印运单
      </el-button>
      <el-button v-repeat-click @click="getWorkworderPage">刷新</el-button>
      <el-button type="danger" v-repeat-click @click="delWorkorder">删除</el-button>
    </my-header>

    <!-- 列表区 -->
    <el-card style="flex: 1;overflow:auto">
      <div class="app-page">
        <div class="content-flex">
          <!-- 移动端切换搜索表单可见性的按钮 -->
          <div v-if="isMobile" style="margin-bottom: 10px;margin-top: 0px; text-align: right;">
            <el-button
              size="mini"
              @click="isSearchFormVisible = !isSearchFormVisible"
              :icon="isSearchFormVisible ? 'el-icon-arrow-up' : 'el-icon-search'"
            >
              {{ isSearchFormVisible ? '隐藏筛选条件' : '显示筛选条件' }}
            </el-button>
          </div>

          <!-- 搜索区 -->
          <div v-show="!isMobile || isSearchFormVisible" style="margin-bottom: 10px">
            <el-form ref="search" :model="search" inline size="small">
              <el-form-item label="" prop="info">
                <el-input style="width: 350px" placeholder="运单号 / 收据号 / 联运单号 / 物品信息 / 门店" clearable
                          v-model="search.info"></el-input>
              </el-form-item>
              <el-form-item label="" prop="receiverInfo">
                <el-input placeholder="收件人信息" clearable v-model="search.receiverInfo"></el-input>
              </el-form-item>
              <el-form-item label="" prop="senderInfo" v-show="false">
                <el-input placeholder="发件人信息" clearable v-model="search.senderInfo"></el-input>
              </el-form-item>
              <el-form-item label="" prop="exported">
                <el-select clearable v-model="search.exported" placeholder="是否导出" style="width: 100px">
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="enabled" style="display: none;">
                <el-select clearable v-model="search.enabled" placeholder="是否启用" style="width: 100px">
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="workOrderStatus">
                <el-cascader placeholder="包裹状态" v-model="search.workOrderStatus" filterable :props="{
                  multiple: true,
                  value: 'name',
                  children: 'childrenInfo',
                  label: 'name'
                }" :options="searchOptions.workOrderStatus" collapse-tags clearable></el-cascader>
              </el-form-item>
              <el-form-item label="" prop="containsHistory">
                <el-checkbox v-model="search.containsHistory">历史状态
                </el-checkbox>
              </el-form-item>

              <el-form-item label="日期范围" prop="date">
                <el-date-picker v-model="search.date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="" prop="goodsCostTypes">
                <el-select v-model="search.goodsCostTypes" placeholder="商品资费类型" multiple collapse-tags clearable>
                  <el-option v-for="item in goodsFormOptions.goodsCostType" :key="item.id" :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="query_batchId">
                <el-button type="primary" @click="searchPage">搜索</el-button>
                <el-button type="warning" @click="$refs.search.resetFields()">重置</el-button>
              </el-form-item>
              <el-form-item label="">
                <el-select v-model="oparates.pop_export_type" @change="handleExportOrder" placeholder="导出运单"
                           clearable>
                  <el-option v-for="item in oparatesOptions.pop_export_type" :key="item.value" :label="item.text"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-select v-model="oparates.pop_print_type" @change="handlePrintOrder" placeholder="打印运单"
                           clearable>
                  <el-option v-for="item in oparatesOptions.pop_print_type" :key="item.value" :label="item.text"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="flex:1">
          <el-table height="100%" :data="data" border stripe highlight-current-row ref="multipleTable"
                    @row-dblclick="handleRowDbclick" @row-click="handleRowClick"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="55"></el-table-column>
            <el-table-column label="运单号" width="160">
              <template slot-scope="scope">
                <div class="cell-item">
                  <el-link @click="handleRowDbclick(scope.row)"><span style="font-weight: 600">{{
                      scope.row.workOrder.workOrderCode
                    }}</span></el-link>
                  <a target="_blank" style="margin-left: 4px;"
                     :href="'https://flyingparcel.ca/usr/index.html#/queryOrder?orderList=' + scope.row.workOrder.workOrderCode"><i
                    class="el-icon-s-promotion" style="font-size: 16px;"></i></a>
                </div>
                <div class="cell-item">{{ scope.row.cardInfo && scope.row.cardInfo.status }}</div>
                <div class="cell-item">{{ scope.row.workOrder.orderStatus }}</div>
                <div class="cell-item">
                  <span :class="{ audit: scope.row.workOrder.auditStatus === '未审核' }">
                    {{ scope.row.workOrder.auditStatus }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="包裹物品" width="240">
              <template slot-scope="scope">
                <div v-for="item in scope.row.orderGoodsInfos">
                  <div class="cell-item">
                    <span style="color: green;margin-right:5px" v-if="item.goodsCategory == '包邮商品'">包</span>
                    {{ item.goodsEnglishBrand }}
                    {{ item.goodsName }}
                    {{ item.specification }}
                    <span style="margin-left:5px">
                      {{ item.buyNum }} × {{ item.unitPrice }}
                    </span>
                  </div>
                </div>

              </template>
            </el-table-column>
            <el-table-column label="收件人信息" width="350">
              <template slot-scope="scope">
                <div class="cell-item">{{ scope.row.receiverInfo.name }}
                  <el-link v-if="scope.row.cardInfo && scope.row.cardInfo.status == '身份证已上传'">
                    <i class="fa fa-id-card-o" style="color:#409eff"></i>
                  </el-link>
                </div>
                <div class="cell-item">{{ scope.row.receiverInfo.phoneNum }}</div>
                <div class="cell-item">
                  {{ scope.row.receiverInfo.provinceName }}{{
                    scope.row.receiverInfo.cityName
                  }}{{ scope.row.receiverInfo.countyName }}{{
                    scope.row.receiverInfo.stressName
                  }}{{ scope.row.receiverInfo.address }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="运单资费" width="150">
              <template slot-scope="scope">
                <div v-if="scope.row.orderCostInfo">
                  <div class="cell-item">{{ scope.row.orderCostInfo.goodsCostTypeName }}</div>
                  <div class="cell-item">计费重量：{{ scope.row.orderCostInfo.billingWeight }}</div>
                  <div class="cell-item" v-if="scope.row.orderCostInfo.freight">运费：{{
                      scope.row.orderCostInfo.freight
                    }}
                  </div>
                  <div class="cell-item" v-if="scope.row.orderCostInfo.goodsAmount">
                    商品费：{{ scope.row.orderCostInfo.goodsAmount }}
                  </div>
                  <div class="cell-item" v-if="scope.row.orderCostInfo.packAmount">
                    包装费：{{ scope.row.orderCostInfo.packAmount }}
                  </div>
                  <div class="cell-item" v-if="scope.row.orderCostInfo.serviceAmount">
                    服务费：{{ scope.row.orderCostInfo.serviceAmount }}
                  </div>
                  <div class="cell-item" v-if="scope.row.orderCostInfo.insuredAmount">
                    保险费：{{ scope.row.orderCostInfo.insuredCost }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="发货分拣" width="250">
              <template slot-scope="scope">
                <span v-if="scope.row.workOrder.receiptCode">
                  收据:
                  <el-link>
                    <router-link
                      :to="{ path: '/finances/invoice', query: { receiptCode: scope.row.workOrder.receiptCode } }"
                      target="_blank">
                      {{ scope.row.workOrder.receiptCode }}</router-link>
                  </el-link>
                </span>
                <span v-if="scope.row.orderDeliver">
                  <div v-if="scope.row.orderDeliver.positions">
                    仓位：{{ scope.row.orderDeliver.positions }}
                  </div>
                  <div v-if="scope.row.orderDeliver.deliveryChannelName">
                    发货渠道：{{ scope.row.orderDeliver.deliveryChannelName }}
                  </div>
                  <div v-if="scope.row.orderDeliver.deliveryBatchName">
                    发货批次：{{ scope.row.orderDeliver.deliveryBatchName }}
                  </div>
                  <div v-if="scope.row.orderDeliver.nextCourierCompany">
                    下游快递：{{ scope.row.orderDeliver.nextCourierCompany }}
                  </div>
                  <div v-if="scope.row.orderDeliver.nextCourierNumber">
                    下游单号：{{ scope.row.orderDeliver.nextCourierNumber }}
                  </div>

                </span>
              </template>
            </el-table-column>

            <el-table-column prop="createTime" label="状态日期" width="200">
              <template slot-scope="scope">
                创建:
                {{ scope.row.workOrder.createTime }}
                <div v-if="scope.row.workOrder.sendDate">
                  发货：{{ scope.row.workOrder.sendDate }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="启用" width="100">
              <template slot-scope="scope">
                <!-- <div v-if="scope.row.workOrder.enabled">
                  <span style="font-size: 20px">
                    <i class="el-icon-circle-check" style="color: #67c23a" v-if="scope.row.workOrder.enabled"></i>
                    <i class="el-icon-circle-close" style="color: #f56c6c" v-else></i>
                </span>
                  启用
                </div> -->

                <div v-if="scope.row.workOrder.exported">
                  <span style="font-size: 20px">
                    <i class="el-icon-circle-check" style="color: #67c23a" v-if="scope.row.workOrder.exported"></i>
                    <i class="el-icon-circle-close" style="color: #f56c6c" v-else></i>
                  </span>
                  已导出
                </div>
                <div v-if="scope.row.workOrder.printed">
                  <span style="font-size: 20px">
                    <i class="el-icon-circle-check" style="color: #67c23a" v-if="scope.row.workOrder.printed"></i>
                    <i class="el-icon-circle-close" style="color: #f56c6c" v-else></i>
                  </span>
                  已打印
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页区 -->
        <div style=" margin-top: 10px">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="currentPage" :page-sizes="[20, 50, 100, 200, 500, 1000]" :page-size="pageSize"
                         background
                         :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
                         :small="isMobile"
                         :total="total">
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 运单-->
    <el-dialog :title="title + '运单'" :visible.sync="dialogFormVisible" :close-on-click-modal="false" v-dialog-drag
               width="1200px" @close="restForm">
      <div style="position: relative">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="运单信息" name="baseForm">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form size="small" :model="receiverInfoForm" label-position="left" label-width="120px"
                         ref="receiverInfoForm">
                  <el-form-item prop="name" label="收件人姓名"
                                :rules="[{ required: true, message: '收件人姓名不能为空', trigger: 'change' }]">
                    <div style="display:flex;align-items: center;" class="receiver-choose">
                      <el-autocomplete style="width:100%" v-model.trim="receiverInfoForm.name"
                                       :fetch-suggestions="handleReceiverFilter" placeholder="请选择收件人"
                                       @select="handleReceiverName"
                                       @change="handleReceiverChange"
                                       popper-class="el-autocomplete-suggestion"
                                       :popper-append-to-body="false">
                        <template slot-scope="{ item }">
                          <div v-if="!isMobile" :style="receiverInfoForm.id === item.id ? 'color:#409EFF' : ''">
                            <span>{{ item.name }}</span>
                            <span style="margin-left: 10px">{{ item.phoneNum }}</span>
                            <span style="margin-left: 10px">{{ item.provinceName }}{{
                                item.cityName
                              }}{{ item.countyName }}{{
                                item.stressName
                              }}{{ item.address }}</span>
                          </div>
                          <div v-else :style="receiverInfoForm.id === item.id ? 'color:#409EFF' : ''">
                            <span>{{ item.name }}</span>
                            <span style="margin-left: 10px">{{ item.phoneNum }}</span>
                            <br>
                            <span style="margin-top: 2px">{{ item.provinceName }}{{
                                item.cityName
                              }}{{ item.countyName }}{{
                                item.stressName
                              }}{{ item.address }}</span>
                          </div>
                        </template>
                      </el-autocomplete>
                      <el-tooltip class="item" effect="dark" content="智能解析地址" placement="top-start">
                        <svg-icon iconClass="address" style="width:20px;height:20px;margin-left:10px"
                                  @click="addressAutoVisiable = true"/>
                      </el-tooltip>
                    </div>
                  </el-form-item>
                  <el-form-item prop="company" label="收件人公司">
                    <el-input v-model="receiverInfoForm.company"></el-input>
                  </el-form-item>
                  <el-form-item prop="phoneNum" label="收件人电话" :rules="[this.$RegExp.required()]">
                    <el-input v-model.trim="receiverInfoForm.phoneNum"></el-input>
                  </el-form-item>
                  <el-row :gutter="10">
                    <el-col :span="12" class="half-width-mobile">
                      <el-form-item prop="countryName" label-width="0px">
                        <el-select @change="handleReceiverCountryChange" filterable style="width: 100%"
                                   v-model="receiverInfoForm.countryName" placeholder="请选择国家">
                          <el-option v-for="item in baseFormOptions.countryName" :key="item" :value="item"
                                     :label="item"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="half-width-mobile">
                      <el-form-item prop="provinceName" label-width="0px">
                        <el-select @change="handleReceiverProvinceChange" filterable style="width: 100%"
                                   v-model="receiverInfoForm.provinceName" placeholder="请选择省份">
                          <el-option v-for="item in baseFormOptions.receiverProvinceName" :key="item" :value="item"
                                     :label="item"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="half-width-mobile">
                      <el-form-item prop="cityName" label-width="0px">
                        <el-select filterable style="width: 100%" v-model="receiverInfoForm.cityName"
                                   @change="handleReceiverCityChange" placeholder="请选择城市">
                          <el-option v-for="item in baseFormOptions.receiverCityName" :key="item" :value="item"
                                     :label="item"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="half-width-mobile">
                      <el-form-item prop="countyName" label-width="0px">
                        <el-input v-model="receiverInfoForm.countyName" placeholder="请输入区县"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="half-width-mobile">
                      <el-form-item prop="stressName" label-width="0px">
                        <el-input v-model="receiverInfoForm.stressName" placeholder="请输入街道"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="half-width-mobile">
                      <el-form-item prop="postalCode" label-width="0px">
                        <el-input v-model.trim="receiverInfoForm.postalCode" placeholder="邮政编码"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item prop="address" label-width="0px">
                        <el-input v-model="receiverInfoForm.address" placeholder="详细地址" type="textarea"
                                  :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <el-row :gutter="10" style="margin-bottom:25px">
                  <el-col :span="12">
                    <el-checkbox v-model="baseForm.saveReceiver">保存到地址簿</el-checkbox>
                  </el-col>
                  <el-col :span="12">
                    <!--                    <el-checkbox v-model="baseForm.defaultForReceiver">设为默认</el-checkbox>-->
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-form size="small" :model="senderInfoForm" label-position="left" label-width="120px"
                         ref="senderInfoForm" style="display: none;">
                  <el-row :gutter="10">
                    <el-col :span="16">
                      <el-form-item prop="firstName" label="发件人姓名" v-if="senderInfoForm.firstName"
                                    :rules="[{ required: true, message: '发件人姓名不能为空', trigger: 'change' }]">
                        <el-autocomplete style="width:100%" v-model="senderInfoForm.firstName"
                                         :fetch-suggestions="handleSenderFilter" placeholder="请选择发件人"
                                         @select="handleSenderName">
                          <template slot-scope="{ item }">
                            <div :style="senderInfoForm.id === item.id ? 'color:#409EFF' : ''">
                              <span v-if="item.firstName">
                                {{ item.firstName }} {{ item.lastName }}
                              </span>
                              <span v-else>
                                {{ item.chineseName }}
                              </span>
                              <span style="margin:0 10px">{{ item.phoneNum }}</span>
                              <span>{{ item.provinceName }}{{
                                  item.cityName
                                }}{{ item.countyName }}{{
                                  item.stressName
                                }}{{ item.address }}</span>
                            </div>
                          </template>
                        </el-autocomplete>
                      </el-form-item>
                      <el-form-item prop="chineseName" label="发件人姓名" v-else
                                    :rules="[{ required: true, message: '发件人姓名不能为空', trigger: 'change' }]">
                        <el-autocomplete style="width:100%" v-model.trim="senderInfoForm.chineseName"
                                         :fetch-suggestions="handleSenderFilter" placeholder="请选择发件人"
                                         @select="handleSenderName">
                          <template slot-scope="{ item }">
                            <div :style="senderInfoForm.id === item.id ? 'color:#409EFF' : ''">
                              <span v-if="item.firstName">
                                {{ item.firstName }} {{ item.lastName }}
                              </span>
                              <span v-else>
                                {{ item.chineseName }}
                              </span>
                              <span style="margin:0 10px">{{ item.phoneNum }}</span>
                              <span>{{ item.provinceName }}{{
                                  item.cityName
                                }}{{ item.countyName }}{{
                                  item.stressName
                                }}{{ item.address }}</span>
                            </div>
                          </template>
                        </el-autocomplete>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item prop="lastName" label="" label-width="0px">
                        <el-input v-model="senderInfoForm.lastName" placeholder="LastName"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item prop="company" label="发件人公司">
                    <el-input v-model="senderInfoForm.company"></el-input>
                  </el-form-item>
                  <el-form-item prop="phoneNum" label="发件人电话" :rules="[this.$RegExp.required()]">
                    <el-input v-model.trim="senderInfoForm.phoneNum"></el-input>
                  </el-form-item>
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <el-form-item prop="countryName" label-width="0px">
                        <el-select @change="handleCustomerCountryChange" filterable style="width: 100%"
                                   v-model="senderInfoForm.countryName" placeholder="请选择国家">
                          <el-option v-for="item in baseFormOptions.countryName" :key="item" :value="item"
                                     :label="item"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="provinceName" label-width="0px">
                        <el-select @change="handleCustomerProvinceChange" filterable style="width: 100%"
                                   v-model="senderInfoForm.provinceName" placeholder="请选择省份">
                          <el-option v-for="item in baseFormOptions.customerProvinceName" :key="item" :value="item"
                                     :label="item"></el-option>
                        </el-select>
                      </el-form-item>

                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="cityName" label-width="0px">
                        <el-select filterable style="width: 100%" v-model="senderInfoForm.cityName"
                                   @change="handleCustomerCityChange" placeholder="请选择城市">
                          <el-option v-for="item in baseFormOptions.customerCityName" :key="item" :value="item"
                                     :label="item"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="countyName" label-width="0px">
                        <el-input v-model="senderInfoForm.countyName" placeholder="请输入区县"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="streetName" label-width="0px">
                        <el-input v-model="senderInfoForm.streetName" placeholder="请输入街道"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="postalCode" label-width="0px">
                        <el-input v-model.trim="senderInfoForm.postalCode" placeholder="邮政编码"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item prop="address" label-width="0px">
                        <el-input v-model="senderInfoForm.address" placeholder="发件地址" type="textarea"
                                  :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-col>
              <el-col :span="8">
                <el-form size="small" :model="baseForm" label-position="left" label-width="120px" ref="baseForm"
                         :rules="baseFormRules">
                  <el-row :gutter="20">
                    <el-col :span="16">
                      <el-form-item prop="storeId" label="所属" label-width="80px">
                        <el-select ref="select" filterable style="width: 100%" v-model="baseForm.customerStoreId"
                                   @change="handleStoreChange" placeholder="请选择所属门店">
                          <el-option v-for="item in stores" :key="item.id" :value="item.id"
                                     :label="item.name"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item prop="workOrderCode" label-width="80px" label="运单号">
                        <el-input v-model.trim="baseForm.workOrderCode"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item prop="customerNum" label="" label-width="0px">

                      </el-form-item>
                      <el-form-item label="" label-width="0px">
                        <el-button @click="getWorkOrderCode" v-if="title == '添加'">生成单号</el-button>
                        <el-button @click="copyVisible = true"
                                   v-if="title != '添加' && !currentRow.workOrder.copiedOrder && currentRow.workOrder.auditStatus !== '已审核'">
                          复制
                        </el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-col>
            </el-row>
            <el-form ref="cardInfoForm" :model="cardInfoForm" size="mini" class="card-info-form">
              <el-row :gutter="20" type="flex" align="middle" style="margin-bottom: 25px" v-if="baseForm.cardNeeded">
                <el-col :xs="24" :sm="4">
                  <el-form-item>
                    <el-input v-model.trim="cardInfoForm.chineseName" placeholder="姓名" disabled
                              class="form-input"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="4">
                  <el-form-item>
                    <el-input v-model.trim="cardInfoForm.idCardNum" placeholder="身份证号"
                              class="form-input"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :xs="24" :sm="4">
                  <el-form-item>
                    <el-upload class="upload-demo" accept=".png,.jpg,.jpeg" :on-change="getFile" action=""
                               :auto-upload="false" :show-file-list="false">
                      <div class="display-img"
                           :style="{ 'background-image': 'url(' + cardInfoForm.positiveImage + ')' }"
                           v-if="cardInfoForm.positiveImage">
                        <div>
                          <i class="el-icon-delete" @click.stop="handleDeleteImage('positiveImage')"></i>
                        </div>
                      </div>
                      <img src="@/assets/img/face.jpg" v-else/>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="4">
                  <el-form-item>
                    <el-upload class="upload-demo" accept=".png,.jpg,.jpeg" :on-change="getFile1" action=""
                               :auto-upload="false" :show-file-list="false">
                      <div class="display-img" :style="{ 'background-image': 'url(' + cardInfoForm.reverseImage + ')' }"
                           v-if="cardInfoForm.reverseImage">
                        <div>
                          <i class="el-icon-delete" @click.stop="handleDeleteImage('reverseImage')"></i>
                        </div>
                      </div>
                      <img src="@/assets/img/back.jpg" v-else/>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="资费与物品" name="goodsForm">
            <el-form size="small" :model="goodsForm" label-position="left" label-width="90px" ref="goodsForm"
                     :rules="goodsFormRules">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="商品资费类型" label-width="120px" prop="goodsCostType">
                    <el-select v-model="goodsForm.goodsCostType" placeholder="商品资费类型"
                               @change="handleGoodsCostType"
                               filterable style="width: 100%">
                      <el-option v-for="item in goodsFormOptions.goodsCostType" :key="item.id" :label="item.name"
                                 :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="4" class="half-width-mobile">
                  <el-form-item label="运费单价" prop="unitPrice">
                    <el-input v-model="goodsForm.unitPrice" @change="getBillWeight"></el-input>
                  </el-form-item>

                </el-col>
                <el-col :span="4" class="half-width-mobile">
                  <el-form-item label="计费重量" prop="billingWeight">
                    <el-input v-model="goodsForm.billingWeight" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="half-width-mobile">
                  <el-form-item label="运费" prop="freight">
                    <el-input v-model="goodsForm.freight" @blur="goodsForm.freight = oninput(goodsForm.freight)"
                              disabled style="color: green"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="half-width-mobile">
                  <el-form-item label="总费用" prop="totalAmount">
                    <el-input v-model="goodsForm.totalAmount"
                              @blur="goodsForm.totalAmount = oninput(goodsForm.totalAmount)" disabled
                              style="color: red"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="half-width-mobile">
                  <el-form-item label="实际重量" prop="realWeight">
                    <el-input v-model="goodsForm.realWeight"
                              @blur="goodsForm.realWeight = oninput(goodsForm.realWeight, true)"
                              @change="getBillWeight"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="half-width-mobile">
                  <el-form-item label="体积-长" prop="length">
                    <el-input v-model="goodsForm.length" @change="handleWeightChange"
                              @blur="goodsForm.length = oninput(goodsForm.length)"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="half-width-mobile">
                  <el-form-item label="体积-宽" prop="wide">
                    <el-input v-model="goodsForm.wide" @blur="goodsForm.wide = oninput(goodsForm.wide)"
                              @change="handleWeightChange"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="half-width-mobile">
                  <el-form-item label="体积-高" prop="height">
                    <el-input v-model="goodsForm.height" @blur="goodsForm.height = oninput(goodsForm.height)"
                              @change="handleWeightChange"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="half-width-mobile">
                  <el-form-item label="体积重" prop="weight">
                    <el-input v-model="goodsForm.weight" @blur="goodsForm.weight = oninput(goodsForm.weight)"
                              @change="getBillWeight"></el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="4">
                  <el-form-item label="预估重量" prop="forecastWeight">
                    <el-input v-model="goodsForm.forecastWeight"
                      @blur="goodsForm.forecastWeight = oninput(goodsForm.forecastWeight)"></el-input>
                  </el-form-item>
                </el-col> -->

                <el-col :span="4" class="half-width-mobile">
                  <el-form-item label="包装总费用" prop="packAmount">
                    <el-input v-model="goodsForm.packAmount"
                              @blur="goodsForm.packAmount = oninput(goodsForm.packAmount)" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="half-width-mobile">
                  <el-form-item label="服务总费用" prop="serviceAmount">
                    <el-input v-model="goodsForm.serviceAmount" disabled
                              @blur="goodsForm.serviceAmount = oninput(goodsForm.serviceAmount)"
                              @change="calcTotal"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="half-width-mobile">
                  <el-form-item label="保险总金额" prop="insuredAmount">
                    <el-input v-model="goodsForm.insuredAmount"
                              @blur="goodsForm.insuredAmount = oninput(goodsForm.insuredAmount)"
                              @change="calcInsuredCos"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="half-width-mobile">
                  <el-form-item label="保险费" prop="insuredCost">
                    <el-input v-model="goodsForm.insuredCost"
                              @blur="goodsForm.insuredCost = oninput(goodsForm.insuredCost)"
                              @change="calcTotal()"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4" v-for="(item, index) in goodsForm.storeAmountInfos" :key="item.name">
                  <el-form-item label-width="0px" label="">
                    <el-checkbox v-model="item.enabled" @change="handleAmountInfoEnabled(item)">
                      {{ item.name }}
                    </el-checkbox>
                    <el-input v-model="item.amount" style="width: 40%;margin-left:20px" :disabled="!item.enabled"
                              @change="handleCalcAmount" @blur="item.amount = oninput(item.amount)"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <!-- PC View: Existing el-table -->
            <div v-if="!isMobile">
              <el-table :data="orderGoods" border style="margin-top:20px">
                <el-table-column label="操作" align="center" width="80">
                  <template slot-scope="scope">
                    <el-button type="danger" circle icon="el-icon-close" @click="deleteGoods(scope.$index)"></el-button>
                  </template>
                </el-table-column>
                <el-table-column label="商品类型" align="center" width="120">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.goodsCategory" @change="handleGoodsCategory(scope.row)">
                      <el-option value="自购商品" label="自购商品"></el-option>
                      <el-option value="包邮商品" label="包邮商品"></el-option>
                      <el-option value="代购商品" label="代购商品"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="物品英文品牌" prop="goodsEnglishBrand">
                  <template slot-scope="scope">
                    <el-autocomplete
                      v-model="scope.row.goodsEnglishBrand"
                      :fetch-suggestions="querySearchAsync"
                      placeholder="请输入内容"
                      @focus="currentGoodsRow = scope.row"
                      @select="handleGoodsChange"
                      @change="handleGoodsChange1"
                    >
                      <template slot-scope="{ item }">
                        <div :style="scope.row.skuCode === item.skuCode ? 'color:#64b0f2' : ''">
                          <span style="display: inline-block;width:80px">{{ item.skuCode }}</span>
                          <span style="display: inline-block;width:200px">{{ item.goodsName }}</span>
                          <span style="display: inline-block;width:200px">{{ item.englishBrand }}</span>
                          <span style="display: inline-block;width:100px">{{ item.specification }}</span>
                          <span>{{ item.measureUnit }}</span>
                        </div>
                      </template>
                    </el-autocomplete>
                  </template>
                </el-table-column>
                <el-table-column label="中文名称" prop="goodsName">
                  <!--                    <el-input v-model="scope.row.goodsName"></el-input>-->
                  <template slot-scope="scope">
                    <el-autocomplete
                      v-model="scope.row.goodsName"
                      :fetch-suggestions="querySearchAsync"
                      placeholder="请输入内容"
                      @focus="currentGoodsRow = scope.row"
                      @select="handleGoodsChange"
                      @change="handleGoodsChange1"
                    >
                      <template slot-scope="{ item }">
                        <div :style="scope.row.skuCode === item.skuCode ? 'color:#64b0f2' : ''">
                          <span style="display: inline-block;width:80px">{{ item.skuCode }}</span>
                          <span style="display: inline-block;width:200px">{{ item.goodsName }}</span>
                          <span style="display: inline-block;width:200px">{{ item.englishBrand }}</span>
                          <span style="display: inline-block;width:100px">{{ item.specification }}</span>
                          <span>{{ item.measureUnit }}</span>
                        </div>
                      </template>
                    </el-autocomplete>
                  </template>
                </el-table-column>
                <el-table-column label="商品类别" prop="goodsTypeName" align="center" width="80">
                  <template slot-scope="scope">
                    <span v-if="scope.row.goodsTypeName !== '新增商品'">{{ scope.row.goodsTypeName }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="规格型号" prop="specification" align="center" width="80">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.specification"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="计量单位" align="center" width="100">
                  <template slot-scope="scope">
                    <el-select filterable style="width: 100%" v-model="scope.row.measureUnit" placeholder="请选择">
                      <el-option v-for="item in measuringUnit" :key="item" :value="item" :label="item"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="数量" width="120" align="center">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.buyNum"
                      controls-position="right"
                      style="width: 100%"
                      :min="0"
                      @change="calcGoodsTotal(scope.row)"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="单价" align="center" width="150">
                  <template slot-scope="scope">
                    <el-input-number
                      v-model="scope.row.unitPrice"
                      controls-position="right"
                      :precision="2"
                      :step="0.1"
                      style="width: 100%"
                      :min="0"
                      @change="calcGoodsTotal(scope.row)"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column label="总价" prop="amount" align="center" width="100">
                </el-table-column>
              </el-table>
            </div>

            <!-- Mobile View: Custom list -->
            <div v-else class="mobile-goods-list" style="margin-top:20px;">
              <div v-for="(goods, index) in orderGoods" :key="index" class="mobile-goods-item">
                <div class="goods-item-row">
                  <span class="goods-label">类型:</span>
                  <el-select v-model="goods.goodsCategory" @change="handleGoodsCategory(goods)" size="mini"
                             style="flex:1;">
                    <el-option value="自购商品" label="自购商品"></el-option>
                    <el-option value="包邮商品" label="包邮商品"></el-option>
                    <el-option value="代购商品" label="代购商品"></el-option>
                  </el-select>
                  <el-button type="danger" circle icon="el-icon-close" size="mini" @click="deleteGoods(index)"
                             style="margin-left: 10px;"></el-button>
                </div>

                <div class="goods-item-row">
                  <span class="goods-label">品牌:</span>
                  <el-autocomplete
                    v-model="goods.goodsEnglishBrand"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="英文品牌"
                    @focus="currentGoodsRow = goods"
                    @select="handleGoodsChange"
                    @change="handleGoodsChange1"
                    popper-class="el-autocomplete-suggestion"
                    :popper-append-to-body="false"
                  >
                    <template slot-scope="{ item }">
                      <div :style="goods.skuCode === item.skuCode ? 'color:#64b0f2' : ''">
                        <span style="display: inline-block;margin: 0 5px 5px 0; ">{{ item.skuCode }}</span>
                        <span style="display: inline-block;margin: 0 5px 5px 0;">{{ item.goodsName }}</span>
                        <span style="display: inline-block;margin: 0 5px 5px 0;">{{ item.englishBrand }}</span>
                        <span style="display: inline-block;margin: 0 5px 5px 0;">{{ item.specification }}</span>
                        <span>{{ item.measureUnit }}</span>
                      </div>
                    </template>
                  </el-autocomplete>
                </div>
                <div class="goods-item-row">
                  <span class="goods-label">名称:</span>
                  <el-autocomplete
                    v-model="goods.goodsName"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="中文名称"
                    @focus="currentGoodsRow = goods"
                    @select="handleGoodsChange"
                    @change="handleGoodsChange1"
                    popper-class="el-autocomplete-suggestion"
                    :popper-append-to-body="false"
                  >
                    <template slot-scope="{ item }">
                      <div :style="goods.skuCode === item.skuCode ? 'color:#64b0f2' : ''">
                        <span style="display: inline-block;margin: 0 5px 5px 0; ">{{ item.skuCode }}</span>
                        <span style="display: inline-block;margin: 0 5px 5px 0;">{{ item.goodsName }}</span>
                        <span style="display: inline-block;margin: 0 5px 5px 0;">{{ item.englishBrand }}</span>
                        <span style="display: inline-block;margin: 0 5px 5px 0;">{{ item.specification }}</span>
                        <span>{{ item.measureUnit }}</span>
                      </div>
                    </template>
                  </el-autocomplete>
                </div>

                <el-row :gutter="10" style="margin-top:5px;">
                  <el-col :span="12">
                    <div class="goods-item-row nested">
                      <span class="goods-label">规格:</span>
                      <el-input v-model="goods.specification" placeholder="规格" size="mini" style="flex:1;"></el-input>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="goods-item-row nested">
                      <span class="goods-label">单位:</span>
                      <el-select filterable style="flex:1;" v-model="goods.measureUnit" placeholder="单位" size="mini">
                        <el-option v-for="unit in measuringUnit" :key="unit" :value="unit" :label="unit"></el-option>
                      </el-select>
                    </div>
                  </el-col>
                </el-row>

                <el-row :gutter="10" style="margin-top:5px;">
                  <el-col :span="8">
                    <div class="goods-item-row nested">
                      <span class="goods-label">数量:</span>
                      <el-input v-model="goods.buyNum" size="mini" style="flex:1;"
                                @change="calcGoodsTotal(goods)"></el-input>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="goods-item-row nested">
                      <span class="goods-label">单价:</span>
                      <el-input-number v-model="goods.unitPrice" size="mini" style="width:100%; flex:1;" :precision="2"
                                       :step="0.1" :min="0" @change="calcGoodsTotal(goods)"></el-input-number>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="goods-item-row nested">
                      <span class="goods-label">总价:</span>
                      <el-input v-model="goods.amount" size="mini" style="flex:1;" disabled></el-input>
                    </div>
                  </el-col>
                </el-row>
                <div class="goods-item-row" v-if="goods.goodsTypeName && goods.goodsTypeName !== '新增商品'">
                  <span class="goods-label">类别:</span>
                  <span>{{ goods.goodsTypeName }}</span>
                </div>

              </div>
            </div>

            <div style="text-align: right; margin-top: 10px">
              <el-link type="primary" :underline="false" @click="addGoods">
                <el-button icon="el-icon-plus" type="primary" circle>
                </el-button>
                添加商品行
              </el-link>
            </div>
          </el-tab-pane>
          <el-tab-pane label="备注" name="note">
            <div style="margin: 20px 0px">
              客户备注
            </div>
            <el-input v-model="baseForm.customerNote" type="textarea"
                      :autosize="{ minRows: 10, maxRows: 15 }"></el-input>
            <div style="margin: 20px 0px">
              员工备注
            </div>
            <el-input v-model="baseForm.employeeNote" type="textarea" disabled
                      :autosize="{ minRows: 10, maxRows: 15 }"></el-input>

          </el-tab-pane>
          <template v-if="title == '修改'">
            <el-tab-pane label="包裹拍照" name="orderPackageForm">
              <el-form size="small" :model="orderPackageForm" label-position="left" label-width="90px"
                       ref="orderPackageForm">
                <el-form-item prop="photosNote" label-width="0px">
                  <el-input v-model="orderPackageForm.photosNote" placeholder="拍照备注" type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
                </el-form-item>
                <el-row :gutter="10">
                  <el-col :offset="15" :span="9">
                    <el-col :span="10" :offset="6">
                      <el-form-item prop="photosCost" label-width="60px" label="拍照费">
                        <el-input v-model="orderPackageForm.photosCost"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item prop="freePhotos" label-width="0px">
                        <el-checkbox v-model="orderPackageForm.freePhotos">是否免费拍照</el-checkbox>
                      </el-form-item>
                    </el-col>
                  </el-col>
                </el-row>
                <div style="margin-top:20px;text-align: center">
                  <upload-image ref="uploadImage" :images="orderPackageForm.photosUrls"></upload-image>
                </div>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="审核" name="orderAuditInfosForm">
              <el-form size="small" :model="orderAuditInfosForm" label-position="left" label-width="90px"
                       ref="orderAuditInfosForm">
                <el-row>

                  <el-table :data="orderAuditInfos" border>
                    <el-table-column label="审核结果" prop="auditResult"></el-table-column>
                    <el-table-column label="审核人" prop="createUser"></el-table-column>
                    <el-table-column label="审核时间" prop="createTime"></el-table-column>
                    <el-table-column label="备注" prop="auditNote"></el-table-column>
                  </el-table>
                </el-row>
              </el-form>
            </el-tab-pane>
          </template>
        </el-tabs>
        <div class="dialog-footer"
             style="position: absolute; top: 5px; right: 20px; display: flex; align-items: center;">
          <!--          <el-checkbox v-model="baseForm.difficultOrder" style="margin-right: 15px;">是否疑难件</el-checkbox>-->
          <el-checkbox v-model="baseForm.agreeNotice" style="margin-right: 5px;">
            <a href="https://flyingparcel.ca/rule.pdf" target="_blank" @click.stop
               style="color: #007bff;">同意用户协议</a>
          </el-checkbox>
          <div class="button-group">
            <el-button type="primary" @click="submit" v-repeatClick v-if="canMod()">
              <i class="fa fa-floppy-o" style="margin-right: 10px"></i>保存运单
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="复制运单" :visible.sync="copyVisible" :close-on-click-modal="false" v-dialog-drag width="300px"
               @close="copyNum = ''">
      <div style="position: relative">
        <el-input v-model="copyNum" placeholder="请输入复制运单数量" autofocus></el-input>
        <div style="margin-top:20px;text-align: right">
          <el-button v-repeatClick @click="copyNum = ''">清空</el-button>
          <el-button type="primary" style="margin-left: 10px" @click="handleCopy" v-repeatClick>复制
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 运单-->
    <!---批量操作商品:upload-fun="mailGoodsOperation" :down-fun="getMailGoodsTemplate"----->
    <upload-excel :visible.sync="dialogFormVisible1" :uploadExcelValue="uploadExcelValue"
                  :visibleDownload="visibleDownload" :visibleExceltype="visibleExceltype" :title="uploadTitle"
                  :templateFileType="templateFileType" :upload-fun="uploadFun" :isDownload="isDownload"
                  @printOrder="printOrderByFile1"></upload-excel>
    <!--    飞翔面单-->
    <
    <div ref="printShow1" style="height: 100%" v-show="printShow1">
      <div style="height: 100%;" v-for="(item, index) in printData" :key="index">
        <div style="height:95mm;width:150mm;font-size:12px;margin-left:2px;color: #000000;font-family: sans-serif;"
             class="print-layout print-border">
          <div class=" app-page print-border-right" style="flex:1;">
            <div class="print-border-bottom print-layout">
              <img src="../../assets/img/print.png" alt="" style="height: 18mm;margin-left:1px;width: 150px">
              <div style="margin:10px 0px 10px 10px" class="print-line-height">
                <div class=" print-weight">
                  Flying Parcel Services Inc.
                </div>
                <div class="">
                  <span class="print-weight">(Richmond)</span> Tel:604-273-1011
                </div>
                <div class="">
                  Web:{{ origin }}
                </div>
              </div>
              <div style="margin-left:0px;">
                <img :src="item.queryQrCodeImage"
                     style="margin-left:20px;margin-top:5px;margin-bottom:5px;height: 80px;width: 80px"/>
                <div class=" print-weight" style="margin-left:20px;">
                  请扫码追踪运单
                </div>
              </div>
            </div>
            <div class="print-layout" style="flex:1">
              <div style="width:56%;height: 100%" class="print-border-right app-page">
                <div class="print-border-bottom  print-line-height">
                  收寄日期：{{ item.workOrder.createTime.slice(0, 10) }}
                </div>
                <div class="print-border-bottom print-line-height">
                  运单号：{{ item.workOrder.workOrderCode }}
                </div>
                <div class="print-border-bottom">
                  <div class="print-line-height">
                    寄件人：{{ item.workOrder.customerName }}
                  </div>
                  <div class="print-line-height">
                    电话：{{ item.senderInfo.phoneNum }}
                  </div>
                </div>
                <div style="flex:1" class="print-border-bottom">
                  <div class="print-line-height">
                    收件人：{{ item.workOrder.receiverName }}
                  </div>
                  <div class="print-line-height">
                    电话：{{ item.receiverInfo.phoneNum }}
                  </div>
                  <div class="print-line-height">
                    地址：{{ item.receiverInfo.provinceName }}{{
                      item.receiverInfo.cityName
                    }}{{ item.receiverInfo.countyName }}{{
                      item.receiverInfo.stressName
                    }}{{ item.receiverInfo.address }}
                  </div>
                </div>
                <div class="print-border-bottom print-line-height">
                  重量：{{ item.orderCostInfo.realWeight || 0 }} 磅
                </div>
                <div class="print-border-bottom print-line-height">
                  <el-row>
                    <el-col :span="12">
                      计费重量：{{ item.orderCostInfo.billingWeight || 0 }} 磅
                    </el-col>
                    <el-col :span="12">
                      单价：{{ item.orderCostInfo.unitPrice || 0 }} 加元
                    </el-col>
                  </el-row>

                </div>
                <div class=" print-line-height">
                  包装费：{{ item.orderCostInfo.packAmount || 0 }} 加元
                </div>
              </div>
              <div style="width: 60%;height: 100%" class="app-page">
                <div style="flex:1" class="print-line-height ">
                  <div>
                    内件品名：
                  </div>
                  <div v-for="goods in item.orderGoodsInfos" :key="goods.goodsEnglishBrand">
                    {{ goods.goodsEnglishBrand }} {{ goods.goodsName }} {{ goods.specification }} * {{ goods.buyNum }}
                  </div>
                </div>
                <div class="print-border-bottom print-line-height print-border-top">
                  <el-row>
                    <el-col :span="12">
                      保险金额：{{ item.orderCostInfo.insuredAmount || 0 }} 加元
                    </el-col>
                    <el-col :span="12">
                      保险费：{{ item.orderCostInfo.insuredCost || 0 }} 加元
                    </el-col>
                  </el-row>

                </div>
                <div class=" print-line-height">
                  总费用：{{ item.orderCostInfo.totalAmount || 0 }} 加元
                </div>
              </div>
            </div>
          </div>
          <div style="width:25mm;height:100%;display:flex;justify-content: center;align-items: center">
            <img :src="item.barCodeImage" style="transform: rotate(-90deg);width:70mm"/>
          </div>
          <div style="width:0px;display:flex;justify-content: center;align-items: center">
            <span style="transform: rotate(-90deg);font-size:16px;position: relative;left:-8px">{{
                item.workOrder.workOrderCode
              }}</span>
          </div>
        </div>
      </div>

    </div>
    <!--    热敏条码单-->
    <div ref="printShow2" style="height: 100%" v-show="printShow2">
      <div style="height:100%" v-for="(item, index) in printData" :key="index">
        <div v-for="(item1, index1) in 2" :class="{ 'margin-top': index1 }">
          <div class="print-border" style="width: 350px;padding:10px">
            <img :src="item.barCodeImage"/>
            <div class="print-line-height">
              <div style="font-size:16px;margin-top:5px">
                收件人：{{ item.workOrder.receiverName }}
              </div>
              <div style="font-size:14px;">
                创建日期：{{ item.workOrder.createTime.slice(0, 10) }}
              </div>
              <div style="font-size:16px">
                运单号：{{ item.workOrder.workOrderCode }}
              </div>
              <div v-for="goods in item.orderGoodsInfos" :key="goods.goodsEnglishBrand">
                {{ goods.goodsEnglishBrand }} {{ goods.goodsName }} {{ goods.specification }} * {{ goods.buyNum }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    仓库打包单-->
    <div ref="printShow3" style="height: 100%" v-show="printShow3">
      <div style="height:100%" v-for="(item, index) in printData" :key="index">
        <div class="print-border" style="width: 350px;padding:10px">
          <img :src="item.barCodeImage"/>
          <div style="text-align: center;font-size:16px">{{ item.workOrder.workOrderCode }}</div>
        </div>
      </div>
    </div>
    <el-dialog title="智能解析地址" :visible.sync="addressAutoVisiable" :close-on-click-modal="false" v-dialog-drag
               width="500px" @close="addressAuto = ''">
      <el-input v-model="addressAuto" type="textarea" placeholder="请输入地址" :autosize="{ minRows: 6, maxRows: 10 }"/>
      <div style="text-align:right;margin-top:20px">
        <el-button @click="addressAuto = ''">清空</el-button>
        <el-button type="success" @click="handleAddressAuto">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>


let search = {
  //客户号
  customerNum: '',
  //运单号
  info: '',
  //收件人信息
  receiverInfo: '',
  //发件人信息
  senderInfo: '',
  //是否导出
  exported: '',
  //是否启用
  enabled: '',
  //包裹状态
  workOrderStatus: [],
  //历史状态
  containsHistory: '',
  //日期范围
  date: [],
  //商品资费类型
  goodsCostTypes: [],
  //登机批次
  boardingBatch: ''
}
const date = new Date()
//身份证信息
let cardInfo = {
  id: 0,
  //姓名
  chineseName: '',
  //身份证号
  idCardNum: '',
  //状态
  status: '身份证已上传',
  //收货人电话
  recvPhoneNum: '',
  //客户列表
  customerNums: '',
  //性别
  gender: '',
  //名族
  national: '',
  //出生日期
  birthDay: '',
  //住址
  address: '',
  //起始有效日期
  startValidDate: '',
  //结束有效日期
  endValidDate: '',
  //备注
  note: '',
  //是否永久有效
  foreverValid: false,
  //身份证正面base64
  positiveImage: '',
  //身份证反面base64
  reverseImage: '',
  enabled: true
}
//收件人信息
let receiverInfo = {
  id: 0,
  //邮政编码
  postalCode: '',
  //省份
  provinceName: '',
  //街道
  stressName: '',
  //详细地址
  address: '',
  //城市名称
  cityName: '',
  //国家名称
  countryName: '中国',
  //县
  countyName: '',
  //客户号
  customerId: '',
  //备注
  note: '',
  //电话号码
  phoneNum: '',
  //姓名
  name: '',
  //是否启用
  enabled: true,
  //是否默认收货地址
  defaulted: false,
  //收件人公司
  company: ''
}
//发件人信息
let senderInfo = {
  id: 0,
  //详细地址
  address: '',
  //省份
  provinceName: '',
  //所在城市名称
  cityName: '',
  //发件人公司
  company: '',
  //所在国家或地区名称
  countryName: '',
  //所在县名称
  countyName: '',
  //客户编号
  customerNum: '',
  //默认发件人地址
  defaulted: false,
  //发件人姓
  firstName: '',
  //发件人名
  lastName: '',
  //中文名
  chineseName: '',
  //备注
  note: '',
  //电话号码
  phoneNum: '',
  //邮政编码s
  postalCode: '',
  //发件仓库id
  storeId: '',
  //发件仓库name
  storeName: '',
  //所在街道名称
  streetName: ''
}
//基本信息
let baseForm = {
  agreeNotice: false,
  id: 0,
  //身份证信息id
  cardInfoId: 0,
  //是否上门取件
  takeOnDoor: false,
  //上门取件
  onDoorOrder: {
    //期望上门日期
    expectDate: dateFormat('YYYY-mm-dd', new Date(date.setTime(date.getTime() + 3600 * 1000 * 24))),
    //期望上门开始时间
    expectStartTime: '',
    //期望上门结束时间
    expectEndTime: '',
    //联系人
    contactName: '',
    //联系电话
    contactPhone: '',
    //取件地址
    contactAddress: ''
  },
  //是否需要上传身份证
  cardNeeded: true,
  //是否可修改
  customerEditAble: false,
  //是否疑难件
  difficultOrder: false,
  //客户名字
  customerName: '',
  //客户备注,
  customerNote: '',
  //客户编号
  customerNum: '',
  //门店所属id
  customerStoreId: '',
  //门店所属名称
  customerStoreName: '',
  //是否默认发件人地址
  defaultForCustomer: false,
  //是否默认收件人地址
  defaultForReceiver: false,
  //运单状态
  orderStatus: '运单生成',
  //收件人id
  receiverId: 0,
  //收件人
  receiverName: '',
  //是否保存发件人
  saveCustomer: false,
  //是否保存收件人信息
  saveReceiver: false,
  //发件人id
  senderId: 0,
  //员工备注
  employeeNote: '',
  //运单编号
  workOrderCode: '',
  //是否启用
  enabled: true
}
//商品资费
let goodsForm = {
  id: 0,
  //商品资费类型
  goodsCostType: '',
  //商品收费名称
  goodsCostTypeName: '',
  //运费单价
  unitPrice: '',
  //计费重量
  billingWeight: '',
  //运费
  freight: '',
  //总费用
  totalAmount: '0',
  //实际重量
  realWeight: '0',
  //体积-长
  length: '',
  //体积-宽
  wide: '',
  //体积-高
  height: '',
  //体积-重
  weight: '',
  //预估重量
  forecastWeight: '',
  //包装费用
  packAmount: '',
  //服务费用
  serviceAmount: '',
  //保险金额
  insuredAmount: '',
  //保险费
  insuredCost: '',
  storeAmountInfos: []
}
let orderGoodsForm = {
  id: 0,
  //货物英文品牌
  goodsEnglishBrand: '',
  skuCode: '',
  //商品类型
  goodsCategory: '自购商品',
  userAdded: false,
  //货物名称
  goodsName: '',
  //货物类型id
  goodsType: '',
  //货物类型名称
  goodsTypeName: '',
  //规格型号
  specification: '',
  //计量单位
  measureUnit: '',
  //数量
  buyNum: '',
  //单价
  unitPrice: '0.00',
  //总价
  amount: '0'
}
//审核信息
let orderAuditInfos = {
  //审核备注
  auditNote: '',
  //运单审核结果
  auditResult: '',
  //运单id
  orderId: ''
}
//包裹信息
let orderPackage = {
  id: 0,
  //是否免费拍照
  freePhotos: false,
  //运单id
  orderId: '',
  //拍照费用
  photosCost: '',
  //拍照备注
  photosNote: '',
  //图片路径
  photosUrls: []
}
//货舱发货信息
let workOrderDeliver = {
  id: 0,
  //发货批次id
  deliveryBatchId: '',
  //发货批次名称
  deliveryBatchName: '',
  //发货渠道id
  deliveryChannelId: '',
  //发货渠道名称
  deliveryChannelName: '',
  //下游联运快递公司
  nextCourierCompany: '',
  //下游联运快递单号
  nextCourierNumber: '',
  //运单id
  orderId: '',
  //仓位
  positions: ''

}
import myHeader from '@/components/pageHEader/pageHeader'
import uploadExcel from './components/uploadExcel'
import {getProvinces, getCities, getCoungries, getImage, getAddress} from '@/api/common'
import {
  getPostageByCustomer
} from '@/api/baseconfig/postage'
import {
  copyOrder,
  getWorkworderGoods,
  getWorkworderPage,
  getWorkworderOrdercode,
  addWorkworder,
  getBillWeight,
  modWorkworder,
  addAudit,
  exportOrder,
  delWorkorder,
  exportIdcard,
  modWorkOrderStatus,
  getWorkOrderStatus,
  workOrderPrint,
  workOrderExcelExport,
  workOrderExcelExportCard,
  workOrderExcelPrint,
  workOrderExcelAddOrUpdate,
  workOrderExcelStatus,
  disableOrEnableWorkOrder,
  getAmountInfo
} from '@/api/business/waybill'
import {getCustomerInfoById, getSenderList} from '@/api/consumers/customer'
import {getReceiverByCustomerNum} from '@/api/consumers/consigneebook'
import {getChannelMap} from '@/api/intermodals/channel'
import {
  getBoardingBatch
} from '@/api/intermodals/batch'
import {
  getCourierCompany
} from '@/api/intermodals/express'
import {getCardInfoById, getCardInfoByReceiver} from '@/api/consumers/idcard'
import uploadImage from '../parts/components/uploadImage'
import {dateFormat} from '@/utils'
import domMessage from '@/utils/messageOnce'
import {
  getPackageInfo
} from '@/api/baseconfig/wordpoint'
import {
  ocrCardImage
} from "@/api/consumers/idcard";

const messageOnce = new domMessage()
import {mapGetters} from 'vuex'
import {checkIdCard} from '@/utils/validate'

export default {
  name: 'parcel',
  components: {
    myHeader,
    uploadImage,
    uploadExcel
  },
  data() {
    return {
      startY: 0,
      isHeaderVisible: true,
      isSearchFormVisible: true, // 新增：控制搜索表单的可见性
      addressAuto: '',
      addressAutoVisiable: false,
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data: [],
      checkIdCard: [{validator: checkIdCard, trigger: 'blur'}],
      //表格选中
      multipleSelection: [],
      //当前选中行
      currentRow: {},
      //搜索
      search: this.cloneObj(search),
      //渠道 批次级联
      props: {
        lazy: true,
        value: 'name',
        label: 'name',
        lazyLoad(node, resolve) {
          const id = node && node.data && node.data.id
          if (id) {
            let query = {
              pageNum: 1,
              pageSize: 1000,
              channelId: id
            }
            getBoardingBatch(query).then((resp) => {
              const nodes = resp.data.records.map(item => ({name: item.batchName, id: item.id, leaf: true}))
              resolve(nodes)
            }).catch(e => {
              resolve([])
            })
          }
        }
      },
      title: '添加',
      dialogFormVisible: false,
      copyVisible: false,
      copyNum: '',
      //创建运单
      addVisible: false,
      goodsList: [],
      currentGoodsRow: {},
      addCustomer: '',
      activeName: 'baseForm',
      //收件人下是否存在身份证
      existCardInfo: false,
      cardInfoForm: this.cloneObj(cardInfo),
      receiverInfoForm: this.cloneObj(receiverInfo),
      senderInfoForm: this.cloneObj(senderInfo),
      baseForm: this.cloneObj(baseForm),
      baseFormOptions: {
        receiverName: [],
        senderName: [],
        tempReceiverName: [],
        countryName: [],
        receiverProvinceName: [],
        customerProvinceName: [],
        receiverCityName: [],
        customerCityName: []
      },
      baseFormRules: {
        onDoorOrder: {
          expectDate: [this.$RegExp.required()],
          contactName: [this.$RegExp.required()],
          contactPhone: [this.$RegExp.required()],
          contactAddress: [this.$RegExp.required()]
        }
      },
      goodsForm: this.cloneObj(goodsForm),
      //保险费率
      premiumRate: '',
      //运单收费项目
      amountInfo: [],
      goodsFormRules: {
        freight: [this.$RegExp.required()],
        realWeight: [this.$RegExp.required()],
        goodsCostType: [this.$RegExp.required('商品资费类型不能为空')]
      },
      goodsFormOptions: {
        goodsCostType: []
      },
      orderGoods: [this.cloneObj(orderGoodsForm)],
      orderPackageForm: this.cloneObj(orderPackage),
      orderAuditInfosForm: this.cloneObj(orderAuditInfos),
      //审核记录
      orderAuditInfos: [],
      workOrderDeliverForm: this.cloneObj(workOrderDeliver),
      workOrderDeliverFormOptions: {
        //渠道
        deliveryChannel: [],
        //发货批次
        deliveryBatch: [],
        //下游联运快递公司
        nextCourierCompany: []
      },
      searchOptions: {
        auditResult: [],
        workOrderStatus: [],
        query_batchId: []
      },
      oparates: {
        //导出运单类型
        pop_export_type: '',
        //导出身份证类型
        pop_idcard_type: '',
        //打印运单类型
        pop_print_type: '',
        //批量修改运单状态类型
        query_batchWorkCode: ''
      },
      oparatesOptions: {
        pop_export_type: [
          {
            text: 'C2C格式',
            id: 'C2C'
          }
        ],
        pop_idcard_type: [
          {
            text: '收货人姓名 + 身份证号码',
            id: 'NAME_CARD_NUM'
          },
          {
            text: '身份证号码',
            id: 'CARD_NUM'
          },
          {
            text: '运单号',
            id: 'ORDER_CODE'
          },
          {
            text: '下游快递单号',
            id: 'COURIER_NUMBER'
          }
        ],
        pop_print_type: [
          {
            text: '飞翔面单',
            id: 1
          },
          {
            text: '仓库打包单',
            id: 2
          },
          {
            text: '热敏条码单',
            id: 3
          }
        ],
        query_batchWorkCode: []
      },

      //导出运单、打印运单、
      dialogFormVisible1: false,
      uploadExcelValue: [],
      uploadTitle: '',
      visibleDownload: false,
      visibleExceltype: false,
      templateFileType: '',
      uploadFun: Function,
      workOrderExcelExport,
      workOrderExcelExportCard,
      workOrderExcelPrint,
      workOrderExcelAddOrUpdate,
      workOrderExcelStatus,
      isDownload: false,
      //打印页面显示与否
      //飞翔面单
      printShow1: false,
      //仓库打包单
      printShow2: false,
      //热敏条码单
      printShow3: false,
      //原网站
      origin: location.origin,
      //打印数据源
      printData: []
    }
  },
  created() {
    //获取所有国家
    getCoungries().then(resp => {
      this.baseFormOptions.countryName = resp.data
    })
    getWorkOrderStatus().then(resp => {
      this.oparatesOptions.query_batchWorkCode = resp.data
    })
    //获取所有渠道
    getChannelMap().then(resp => {
      this.workOrderDeliverFormOptions.deliveryChannel = resp.data
    })

    //获取包裹状态
    getPackageInfo({pageNum: 1, pageSize: 100}).then(resp => {
      this.delChildren(resp.data.records)
      this.searchOptions.workOrderStatus = resp.data.records
    })
    //获取包裹状态 审核状态
    getPackageInfo({pageNum: 1, pageSize: 100, info: '审核'}).then(resp => {
      this.searchOptions.auditResult = resp.data.records[0].childrenInfo
    })
    //获取下游快递公司
    let query = {
      pageNum: 1,
      pageSize: 1000,
      companyType: '下游快递'
    }
    getCourierCompany(query).then((resp) => {
      this.workOrderDeliverFormOptions.nextCourierCompany = resp.data.records
    })
  },
  computed: {
    ...mapGetters(['userInfo', 'stores']),
    isMobile() {
      return window.innerWidth <= 768;
    }
  },
  mounted() {
    window.addEventListener('touchstart', this.handleTouchStart);
    window.addEventListener('touchmove', this.handleTouchMove);

    if (this.isMobile) {
      this.isHeaderVisible = false;
      this.isSearchFormVisible = false; // 移动端默认折叠搜索表单
    }

    this.$nextTick(() => {
      this.getPostageByCustomer(this.userInfo.customerNum)
      this.getWorkworderPage()
    })
  },
  beforeDestroy() {
    window.removeEventListener('touchstart', this.handleTouchStart);
    window.removeEventListener('touchmove', this.handleTouchMove);
  },
  methods: {
    handleTouchStart(e) {
      this.startY = e.touches[0].clientY;
    },
    handleTouchMove(e) {
      if (!this.isMobile) return; // Add this line
      const currentY = e.touches[0].clientY;
      const deltaY = currentY - this.startY;

      // 上滑阈值（可根据需要调整）
      if (deltaY < -30 && this.isHeaderVisible) {
        this.isHeaderVisible = false;
      } else if (deltaY > 30 && !this.isHeaderVisible) {
        this.isHeaderVisible = true;
      }
    },
    //是否可修改
    canMod() {
      if (this.title != '添加') {
        if (this.currentRow.workOrder.auditStatus !== '未审核' && !this.currentRow.workOrder.customerEditAble) {
          return false
        }
      }
      return true
    },
    handleAddressAuto() {
      getAddress({address: this.addressAuto}).then(resp => {
        const {phoneNumber, province, city, region, street, postCode, name} = resp.data
        this.receiverInfoForm.name = name
        this.receiverInfoForm.postalCode = postCode
        this.receiverInfoForm.provinceName = province
        this.receiverInfoForm.cityName = city
        this.receiverInfoForm.stressName = street
        this.receiverInfoForm.address = resp.data.address
        this.receiverInfoForm.countyName = region
        this.receiverInfoForm.phoneNum = phoneNumber
        this.receiverInfoForm.customerId = this.baseForm.customerNum
        this.handleReceiverChange(this.receiverInfoForm.name)
        this.handleReceiverCountryChange(this.receiverInfoForm.countryName, 'first')
        this.handleReceiverProvinceChange(this.receiverInfoForm.provinceName, 'first')
        this.addressAutoVisiable = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getWorkworderPage()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getWorkworderPage()
    },
    //递归删除childrenInfo为【】
    delChildren(arr) {
      arr.forEach(item => {
        if (item.childrenInfo.length === 0) {
          delete item.childrenInfo
        } else {
          this.delChildren(item.childrenInfo)
        }
      })
    },
    //导出运单
    handleExportOrder(val) {
      if (!val) return
      if (!this.multipleSelection.length) {
        this.oparates.pop_export_type = ''
        this.tip('请先勾选需要导出的运单！')
        return
      }
      this.postDownload(exportOrder(val), this.multipleSelection.map(item => item.workOrder.workOrderCode))
    },

    //打印运单
    handlePrintOrder(val) {
      if (!val) return
      let arr = []
      if (Object.values(this.search).filter(item => item && item.length).length) {
        arr = this.data.map(item => item.workOrder.workOrderCode)
      } else {
        if (!this.multipleSelection.length) {
          this.oparates.pop_print_type = ''
          this.tip('请先勾选需要打印的运单！')
          return
        }
      }
      if (this.multipleSelection.length) {
        arr = this.multipleSelection.map(item => item.workOrder.workOrderCode)
      }
      let id = 'printShow' + this.oparates.pop_print_type
      this.printData = []
      workOrderPrint(arr).then(resp => {
        this[id] = true
        this.printData = resp.data
        this.$nextTick(() => {
          this.$print(this.$refs[id], null, this.oparates.pop_print_type)
          this[id] = false
        })
      })
    },
    //通过上传文件打印运单
    printOrderByFile1(data, type) {
      if (!type) {
        this.$message.error('请选择打印类型')
      } else {
        let id = 'printShow' + type
        this[id] = true
        this.printData = data
        this.$nextTick(() => {
          this.$print(this.$refs[id], null, this.oparates.pop_print_type)
          this[id] = false
        })
      }
    },
    //删除代购商品信息
    delWorkorder() {
      if (!this.multipleSelection.length) {
        this.tip()
        return
      }
      this.confirm().then(() => {
        delWorkorder(this.multipleSelection.map((item) => item.workOrder.id)).then(
          (resp) => {
            this.$message.success(resp.message || '成功')
            this.getWorkworderPage()
          }
        )
      })
    },
    //分页查询
    getWorkworderPage() {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        containsHistory: this.search.containsHistory,
        enabled: this.search.enabled,
        exported: this.search.exported,
        goodsCostTypes: this.search.goodsCostTypes,
        info: this.search.info,
        customerNum: this.userInfo.customerNum,
        receiverInfo: this.search.receiverInfo,
        senderInfo: this.search.senderInfo,
        boardingBatch: this.search.boardingBatch.slice(-1).toString(),
        workOrderStatus: this.search.workOrderStatus.map(item => Array.isArray(item) && item.slice(-1)).flat(2),
        startDate: this.search.date[0] ? this.search.date[0] + ' 00:00:00' : '',
        endDate: this.search.date[1] ? this.search.date[1] + ' 23:59:59' : ''
      }
      let rows = this.multipleSelection
      getWorkworderPage(query).then(resp => {
        this.data = resp.data.records
        this.total = resp.data.total
        this.$nextTick(() => {
          this.setCurrent()
          this.toggleSelection(rows)
        })
      })
    },
    //搜索
    searchPage() {
      this.currentPage = 1
      this.pageSize = 20
      this.getWorkworderPage()
    },
    //页面数据刷新后都会默认选中之前选择的数据
    setCurrent() {
      if (this.currentRow.workOrder) {
        let checkRow = this.data.filter(item => item.workOrder.id == this.currentRow.workOrder.id)
        this.$refs.multipleTable.setCurrentRow(checkRow[0])
      }
    },
    toggleSelection(rows) {
      this.$refs.multipleTable.clearSelection()
      rows.forEach(row => {
        let checkRow = this.data.filter(item => item.workOrder.id == row.workOrder.id)
        if (checkRow.length) {
          this.$refs.multipleTable.toggleRowSelection(checkRow[0], true)
        }
      })
    },
    //查看身份证信息
    view() {
      this.handleBeforeUpdate()
      this.title = '查看'
    },
    //表格双击修改
    handleRowDbclick(row) {
      this.handleUpdate(row)
    },
    //单击表格
    handleRowClick(row) {
      this.currentRow = row
    },
    //勾选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //获取门店运单收费项目
    getAmountInfo(storeId, isAdd) {
      getAmountInfo(storeId).then(resp => {
        this.amountInfo = resp.data
        if (isAdd) { //运单添加时候收费项目初始化，不选择
          this.goodsForm.storeAmountInfos = resp.data.map(item => ({name: item.name, enabled: false, amount: ''}))
        }
        this.handleCalcAmount()
      })
    },
    handleCreateInvoice() {
      if (!this.multipleSelection.length) {
        this.tip()
        return
      }
      if (this.multipleSelection.some(item => item.workOrder.receiptCode)) {
        this.tip('勾选的销售单不能包含已有收据信息的运单')
        return
      }
      let list = this.multipleSelection.map(item => item.workOrder.workOrderCode).join(',')
      this.$router.push({path: '/finances/invoice', query: {list}})
    },
    handleAdd() {
      this.title = '添加'
      getCustomerInfoById(this.userInfo.customerNum).then(resp => {
        this.baseForm = this.cloneObj(baseForm)
        if (resp.data.length) {
          // 发件人默认地址看是否可用
          let defaultAddress = resp.data.filter(item => item.defaulted)[0]
          resp.data = defaultAddress || resp.data[resp.data.length - 1]
          if (defaultAddress) {
            this.baseForm.defaultForCustomer = true
          }
          //根据客户号查询 收件人列表
          getReceiverByCustomerNum({customerNum: this.userInfo.customerNum}).then(resp => {
            this.baseFormOptions.receiverName = resp.data
            this.baseFormOptions.tempReceiverName = resp.data
            //如果收件人有默认情况
            let defaultReceiver = resp.data.filter(item => item.defaulted)[0]
            if (defaultReceiver) {
              this.handleReceiverName(defaultReceiver)
              if (defaultReceiver) {
                this.baseForm.defaultForReceiver = true
              }
            }
          })
          //赋初始值
          this.handleModform(resp.data, this.senderInfoForm)
          this.getAmountInfo(resp.data.storeId, true)

          this.baseForm.customerNum = this.userInfo.customerNum
          console.log(sessionStorage.storeName)
          console.log(sessionStorage.storeId)

          if (sessionStorage.storeName !== undefined) {
            this.baseForm.customerStoreName = sessionStorage.storeName
            this.baseForm.customerStoreId = parseInt(sessionStorage.storeId)
          } else {
            this.baseForm.customerStoreName = resp.data.storeName
            this.baseForm.customerStoreId = resp.data.storeId
          }
          this.addVisible = false
          this.receiverInfoForm = this.cloneObj(receiverInfo)
          this.cardInfoForm = this.cloneObj(cardInfo)
          this.goodsForm = this.cloneObj(goodsForm)
          this.orderGoods = [this.cloneObj(orderGoodsForm)]
          this.handleCustomerCountryChange(this.senderInfoForm.countryName, 'first')
          this.handleCustomerProvinceChange(this.senderInfoForm.provinceName, 'first')
          this.handleReceiverCountryChange(this.receiverInfoForm.countryName, 'first')
          this.dialogFormVisible = true

        } else {
          this.baseFormOptions.receiverName = []
          this.baseFormOptions.tempReceiverName = []
          this.$message.error('客户号不存在，创建运单失败！')
        }
      })
    },
    handleBeforeUpdate() {
      if (!this.multipleSelection.length) {
        this.tip()
        return
      }
      if (this.multipleSelection.length > 1) {
        this.tip('只能勾选表格中的一条数据')
        return
      }
      this.handleUpdate(this.multipleSelection[0])
    },
    //修改
    handleUpdate(row) {
      // if(!row.workOrder.customerEditAble){
      //   this.$message.warning('当前运单不允许客户修改!')
      //   return;
      // }
      // if(row.workOrder.auditStatus !== '未审核' && !row.workOrder.customerEditAble){
      //   this.$message.warning('当前运单不允许修改!')
      //   return;
      // }
      console.log("修改运单", row)
      this.currentRow = row
      //修改处理
      getReceiverByCustomerNum({customerNum: row.workOrder.customerNum}).then(resp => {
        this.baseFormOptions.receiverName = resp.data
        this.baseFormOptions.tempReceiverName = resp.data
      })
      this.handleModform(row.workOrder, this.baseForm)

      if (!this.baseForm.takeOnDoor) {
        this.baseForm.onDoorOrder = this.cloneObj(baseForm.onDoorOrder)
      }
      if (row.cardInfo) {
        if (row.cardInfo.id > 0) {
          this.existCardInfo = true
        }
        this.handleModform(row.cardInfo, this.cardInfoForm)
        //获取身份证照片base64
        getCardInfoById(this.cardInfoForm.id).then(resp => {
          this.cardInfoForm.reverseImage = resp.data.reverseImage
          this.cardInfoForm.positiveImage = resp.data.positiveImage
        })
      } else {
        this.cardInfoForm = this.cloneObj(cardInfo)
      }
      this.handleModform(row.senderInfo, this.senderInfoForm)
      this.handleModform(row.receiverInfo, this.receiverInfoForm)
      this.handleModform(row.orderCostInfo, this.goodsForm)
      this.getAmountInfo(row.workOrder.customerStoreId, !row.orderCostInfo.storeAmountInfos.length)
      this.orderGoods = this.cloneObj(row.orderGoodsInfos)
      //修改时展示的表单
      //包裹拍照
      if (row.orderPackage) {
        this.handleModform(row.orderPackage, this.orderPackageForm)
      } else {
        this.orderPackageForm = this.cloneObj(orderPackage)
      }
      this.orderPackageForm.orderId = this.baseForm.id
      //审核
      if (row.orderAuditInfos.length) {
        this.handleModform(row.orderAuditInfos, this.orderAuditInfosForm)
      } else {
        this.orderAuditInfosForm = this.cloneObj(orderAuditInfos)
      }
      this.orderAuditInfosForm.orderId = this.baseForm.id
      //仓库发货
      if (row.orderDeliver) {
        this.handleModform(row.orderDeliver, this.workOrderDeliverForm)
        if (row.orderDeliver.deliveryChannelId) {
          this.handleChannelChange(row.orderDeliver.deliveryChannelId, row.orderDeliver.deliveryBatchId)
        }
      } else {
        this.workOrderDeliverForm = this.cloneObj(workOrderDeliver)
      }
      this.workOrderDeliverForm.orderId = this.baseForm.id
      //审核记录
      this.orderAuditInfos = row.orderAuditInfos

      this.handleReceiverCountryChange(this.receiverInfoForm.countryName, 'first')
      this.handleReceiverProvinceChange(this.receiverInfoForm.provinceName, 'first')
      this.handleCustomerCountryChange(this.senderInfoForm.countryName, 'first')
      this.handleCustomerProvinceChange(this.senderInfoForm.provinceName, 'first')
      this.title = '修改'
      this.baseForm.agreeNotice = true
      this.dialogFormVisible = true

    },
    //启用或禁用
    enabled(enabled) {
      if (!this.multipleSelection.length) {
        this.tip()
        return
      }
      let ids = this.multipleSelection.map((item) => item.workOrder.id)
      let tip
      if (enabled) {
        tip = '此操作将启用运单信息, 是否继续?'
      } else {
        tip = '此操作将禁用运单信息, 是否继续?'
      }
      this.confirm(tip).then(() => {
        disableOrEnableWorkOrder(ids, {enabled}).then((resp) => {
          this.$message.success(resp.message || '成功')
          this.getWorkworderPage()
        })
      })
    },
    //重置表单信息
    restForm() {
      this.premiumRate = ''
      this.activeName = 'baseForm'
      this.$nextTick(() => {
        if (this.$refs.baseForm) this.$refs.baseForm.resetFields()
        if (this.$refs.senderInfoForm) this.$refs.senderInfoForm.resetFields()
        if (this.$refs.receiverInfoForm) this.$refs.receiverInfoForm.resetFields()
        if (this.$refs.goodsForm) this.$refs.goodsForm.resetFields()
      })
      this.getWorkworderPage()
    },
    submit() {
      if (!this.baseForm.agreeNotice) {
        this.$message.error('请同意用户须知')
        return
      }
      this.$refs['baseForm'].validate((valid) => {
        if (valid) {
          this.$refs['senderInfoForm'].validate((valid) => {
            if (valid) {
              this.$refs['receiverInfoForm'].validate((valid) => {
                if (valid) {
                  this.$refs['goodsForm'].validate(valid => {
                    if (valid) {
                      let orderGoodsInfos = this.cloneObj(this.orderGoods)
                      if (orderGoodsInfos.some(item => !(item.goodsName && item.goodsEnglishBrand && item.measureUnit && item.specification && item.buyNum))) {
                        this.$message.error('商品品牌，中文名称，规格，单位，数量必填！')
                        return
                      }
                      let workOrder = this.cloneObj(this.baseForm)
                      let cardInfo = this.cloneObj(this.cardInfoForm)
                      // cardInfo.recvPhoneNum = this.receiverInfoForm.phoneNum
                      let receiverInfo = this.cloneObj(this.receiverInfoForm)
                      let senderInfo = this.cloneObj(this.senderInfoForm)

                      if (!workOrder.takeOnDoor) { //是否上门
                        delete workOrder.onDoorOrder
                      } else {
                        if (workOrder.onDoorOrder.expectStartTime && workOrder.onDoorOrder.expectStartTime.length == 5) {
                          workOrder.onDoorOrder.expectStartTime += ':00'
                        }
                        if (workOrder.onDoorOrder.expectEndTime && workOrder.onDoorOrder.expectEndTime.length == 5) {
                          workOrder.onDoorOrder.expectEndTime += ':00'
                        }
                      }
                      //是否为默认地址
                      // this.receiverInfoForm.defaulted = workOrder.defaultForReceiver
                      this.receiverInfoForm.defaulted = false
                      workOrder.defaultForReceiver = false
                      workOrder.defaultForCustomer = false
                      workOrder.cardInfoId = cardInfo.id
                      workOrder.customerName = senderInfo.chineseName
                      workOrder.customerNum = senderInfo.customerNum
                      workOrder.senderId = senderInfo.id
                      workOrder.receiverId = receiverInfo.id
                      workOrder.receiverName = receiverInfo.name
                      let orderCostInfo = this.cloneObj(this.goodsForm)
                      orderCostInfo.storeAmountInfos.forEach(item => {
                        item.amount = parseFloat(item.amount || 0)
                      })
                      //收件人下面没有身份信息的时候  运单当前是否需要上传身份证 是 id = 0 否 id = -1 其他id为原id
                      if (!this.existCardInfo) {
                        if (workOrder.cardNeeded) {
                          cardInfo.id = 0
                        } else {
                          cardInfo.id = -1
                        }
                      }
                      if (workOrder.cardNeeded) {
                        if (cardInfo.idCardNum && cardInfo.positiveImage && cardInfo.reverseImage) {
                          workOrder.cardStatus = '身份证已上传'
                        } else if (cardInfo.idCardNum && !(cardInfo.positiveImage && cardInfo.reverseImage)) {
                          workOrder.cardStatus = '身份证无图片'
                        } else if (!cardInfo.idCardNum) {
                          workOrder.cardStatus = '身份证未上传'
                        }
                      } else {
                        workOrder.cardStatus = '无需身份证'
                      }
                      let submit = {
                        workOrder,
                        orderCostInfo,
                        orderGoodsInfos,
                        cardInfo,
                        receiverInfo,
                        senderInfo
                      }
                      let request
                      if (this.title == '添加') {
                        request = addWorkworder
                      } else {
                        request = modWorkworder
                        let orderDeliver = this.cloneObj(this.workOrderDeliverForm)
                        if (!orderDeliver.deliveryBatchId) {
                          orderDeliver.deliveryBatchId = null
                        }
                        if (!orderDeliver.deliveryChannelId) {
                          orderDeliver.deliveryChannelId = null
                        }
                        let orderPackage = this.cloneObj(this.orderPackageForm)
                        submit.orderDeliver = orderDeliver
                        submit.orderPackage = orderPackage
                      }
                      request(submit).then(resp => {
                        this.$message.success(resp.message || '成功')
                        this.dialogFormVisible = false
                      })
                    } else {
                      this.activeName = 'goodsForm'
                    }
                  })
                } else {
                  this.activeName = 'baseForm'
                }
              })
            } else {
              this.activeName = 'baseForm'
            }
          })

        } else {
          this.activeName = 'baseForm'
        }
      })
    },
    //审核
    saveAudit() {
      this.$refs['orderAuditInfosForm'].validate((valid) => {
        if (valid) {
          let submit = this.cloneObj(this.orderAuditInfosForm)
          addAudit(submit).then(resp => {
            this.$message.success(resp.message || '成功')
          })
        }
      })
    },
    //自定义过滤规则
    handleReceiverFilter(queryString, cb) {
      let results = queryString ? this.baseFormOptions.receiverName.filter(item => item.name.indexOf(queryString) != -1) : this.baseFormOptions.receiverName
      cb(results)
    },
    //自定义过滤规则
    handleSenderFilter(queryString, cb) {
      getSenderList(this.baseForm.customerNum).then(resp => {
        this.baseFormOptions.senderName = resp.data
        let results = queryString ? resp.data.filter(item => JSON.stringify(item).indexOf(queryString) != -1) : resp.data
        cb(results)
      })

    },
    //发件人选择
    handleSenderName(info) {
      this.handleModform(info, this.senderInfoForm)
      this.handleReceiverCountryChange(this.senderInfoForm.countryName, 'first')
      this.handleReceiverProvinceChange(this.senderInfoForm.provinceName, 'first')
    },
    //重置身份证信息
    handleResetCardInfo() {
      this.handleModform(cardInfo, this.cardInfoForm)
      this.cardInfoForm.chineseName = this.receiverInfoForm.name
    },
    //收件人选择
    handleReceiverName(info) {
      this.handleModform(info, this.receiverInfoForm)
      this.cardInfoForm.chineseName = info.name
      getCardInfoByReceiver({customerNum: info.customerNum, receiverName: info.name}).then(resp => {
        let cardInfo = resp.data[0]
        if (cardInfo) {
          this.existCardInfo = true
          this.handleModform(cardInfo, this.cardInfoForm)
          getCardInfoById(cardInfo.id).then(resp => {
            this.cardInfoForm.reverseImage = resp.data.reverseImage
            this.cardInfoForm.positiveImage = resp.data.positiveImage
          })
        } else {
          this.existCardInfo = false
          this.handleResetCardInfo()
          this.cardInfoForm.customerNums = [this.baseForm.customerNum]
        }
      })
      this.handleReceiverCountryChange(this.receiverInfoForm.countryName, 'first')
      this.handleReceiverProvinceChange(this.receiverInfoForm.provinceName, 'first')
    },
    //收件人改变
    handleReceiverChange(val) {
      if (!val) {
        return
      }
      //当添加 新收件人时候会触发

      this.receiverInfoForm.id = 0
      this.cardInfoForm.chineseName = this.receiverInfoForm.name
      //查询是否存在身份证
      getCardInfoByReceiver({customerNum: this.baseForm.customerNum, receiverName: val}).then(resp => {
        let cardInfo = resp.data[0]
        if (cardInfo) {
          this.existCardInfo = true
          this.handleModform(cardInfo, this.cardInfoForm)
          getCardInfoById(cardInfo.id).then(resp => {
            this.cardInfoForm.reverseImage = resp.data.reverseImage
            this.cardInfoForm.positiveImage = resp.data.positiveImage
          })
        } else {
          this.existCardInfo = false
          this.handleResetCardInfo()
          this.cardInfoForm.customerNums = [this.baseForm.customerNum]
        }
      })

    },
    //收件人国家改变
    handleReceiverCountryChange(val, type) {
      if (!val) {
        return
      }
      if (type != 'first') { //第一次加载初始值时不清空
        this.baseFormOptions.receiverProvinceName = []
        this.baseFormOptions.receiverCityName = []
        this.resetLoacl('receiverInfoForm', ['provinceName', 'cityName', 'countyName'])
      }
      getProvinces(val).then(resp => {
        this.baseFormOptions.receiverProvinceName = resp.data
      })
    },
    //收件人省份改变
    handleReceiverProvinceChange(val, type) {
      if (!val) {
        return
      }
      if (type != 'first') {
        this.baseFormOptions.receiverCityName = []
        this.resetLoacl('receiverInfoForm', ['receiverInfoForm', 'countyName'])
      }
      getCities(val).then(resp => {
        this.baseFormOptions.receiverCityName = resp.data
      })
    },
    //收件人城市改变
    handleReceiverCityChange(val) {
      this.resetLoacl('receiverInfoForm', ['countyName'])
    },
    //发件人国家改变
    handleCustomerCountryChange(val, type) {
      if (!val) {
        return
      }
      if (type != 'first') {
        this.baseFormOptions.customerProvinceName = []
        this.baseFormOptions.customerCityName = []
        this.resetLoacl('senderInfoForm', ['provinceName', 'cityName', 'countyName'])
      }
      getProvinces(val).then(resp => {
        this.baseFormOptions.customerProvinceName = resp.data
      })
    },
    //发件人省份改变
    handleCustomerProvinceChange(val, type) {
      if (!val) {
        return
      }
      if (type != 'first') {
        this.baseFormOptions.customerCityName = []
        this.resetLoacl('senderInfoForm', ['cityName', 'countyName'])
      }
      getCities(val).then(resp => {
        this.baseFormOptions.customerCityName = resp.data
      })
    },
    //发件人城市改变
    handleCustomerCityChange(val) {
      this.resetLoacl('senderInfoForm', ['countyName'])
    },
    //重置地区
    resetLoacl(type, list = []) {
      list.forEach(item => {
        this[type][item] = ''
      })
    },
    //上传身份图片处理函数
    getFile(file, fileList) {
      const isLt2M = file.size / 1024 / 1024 < 2                         //限制图片大小
      if (!isLt2M) {
        messageOnce.error('上传身份证图片大小不能超过 2MB!')
        return
      }
      let form = new FormData()
      form.append('image', file.raw)
      ocrCardImage(form).then(resp => {
        this.cardInfoForm.idCardNum = resp.data.idCardNum
      }).catch(e => {
      })
      this.getBase64(file.raw).then(res => {
        this.cardInfoForm.positiveImage = res
      })
    },
    getFile1(file, fileList) {
      const isLt2M = file.size / 1024 / 1024 < 2                         //限制图片大小
      if (!isLt2M) {
        messageOnce.error('上传身份证图片大小不能超过 2MB!')
        return
      }
      this.getBase64(file.raw).then(res => {
        this.cardInfoForm.reverseImage = res
      })
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
    handleDeleteImage(type) {
      this.cardInfoForm[type] = ''
    },
    //选择仓库名称
    handleStoreChange(val) {
      this.stores.forEach(item => {
        if (val == item.id) {
          this.baseForm.customerStoreName = item.name
          this.getAmountInfo(this.baseForm.customerStoreId, true)
        }
      })
    },
    //获取单号
    getWorkOrderCode() {
      getWorkworderOrdercode({storeId: this.senderInfoForm.storeId}).then(resp => {
        this.baseForm.workOrderCode = resp.msg
      })
    },
    //复制单号
    handleCopy() {
      copyOrder(this.currentRow.workOrder.workOrderCode, this.copyNum).then(resp => {
        this.$message.success(resp.message || '成功')
        this.copyVisible = false
      })
    },
    //通过客户号查询商品资费
    getPostageByCustomer(customerNum) {
      getPostageByCustomer(customerNum).then(resp => {
        this.goodsFormOptions.goodsCostType = resp.data
      })
    },
    //商品资费类型改变
    handleGoodsCostType(val) {
      let goods = this.goodsFormOptions.goodsCostType.filter(item => item.id === val)[0]
      // console.log("goods is ")
      // console.log(goods)
      this.baseForm.cardNeeded = !!goods.idCardNeeded;
      this.goodsForm.goodsCostTypeName = goods.name
      //计费重量
      this.goodsForm.billingWeight = goods.weightThresholdValue
      this.premiumRate = goods.premiumRate
      this.getBillWeight()
    },
    //根据实际重量计算计费重量和运费
    getBillWeight() {
      if (this.goodsForm.goodsCostType) {
        let weight
        if (parseFloat(this.goodsForm.weight) > parseFloat(this.goodsForm.billingWeight) && parseFloat(this.goodsForm.weight) > parseFloat(this.goodsForm.realWeight)) {
          weight = parseFloat(this.goodsForm.weight)
        }
        let query = {
          realWeight: weight || parseFloat(this.goodsForm.realWeight || 0)
        }
        if (this.goodsForm.unitPrice && parseInt(this.goodsForm.unitPrice)) {
          query.unitPrice = parseFloat(this.goodsForm.unitPrice)
        }
        getBillWeight(this.goodsForm.goodsCostType, query).then(resp => {
          this.goodsForm.freight = resp.data.weightCost
          this.goodsForm.billingWeight = resp.data.billWeight
          this.goodsForm.unitPrice = this.goodsForm.freight / this.goodsForm.billingWeight
          this.calcTotal()
        })
      }
    },
    //体积重
    handleWeightChange() {
      if (this.goodsForm.length && this.goodsForm.wide && this.goodsForm.height) {
        let weight = parseFloat(this.goodsForm.length) * parseFloat(this.goodsForm.wide) * parseFloat(this.goodsForm.height)
        this.goodsForm.weight = this.oninput(this.oninput(weight / 2727))
        this.getBillWeight()
      }
    },
    //其他费用改变时
    handleAmountInfoEnabled(item) {
      //当前运单收费项目
      let currentInfo = this.amountInfo.filter(info => info.name === item.name)[0]
      if (currentInfo) {
        if (item.enabled) {
          item.amount = this.oninput(currentInfo.amount)
        } else {
          item.amount = ''
        }
      }
      this.handleCalcAmount()
    },
    //计算总费用
    calcTotal() {
      //运费+包装费(物品加固)+服务费+保险+包邮、自购商品价格
      this.goodsForm.totalAmount = this.oninput(parseFloat(this.goodsForm.freight) + parseFloat(this.goodsForm.packAmount || 0) + parseFloat(this.goodsForm.serviceAmount || 0) + parseFloat(this.goodsForm.insuredCost || 0))
      this.orderGoods.forEach(item => {
        if (item.goodsCategory !== '自购商品') {
          this.goodsForm.totalAmount = this.oninput(parseFloat(this.goodsForm.totalAmount) + parseFloat(item.amount))
        }
      })
    },
    //计算运单收费项目  包括服务类 包装类
    handleCalcAmount() {
      this.goodsForm.packAmount = ''
      this.goodsForm.serviceAmount = ''
      this.goodsForm.storeAmountInfos.forEach(item => {
        let type = this.amountInfo.filter(info => info.name === item.name)[0].type
        if (item.enabled) {
          if (type === '包装类') {
            this.goodsForm.packAmount = this.oninput(parseFloat(this.goodsForm.packAmount || 0) + parseFloat(item.amount || 0))
          } else {
            this.goodsForm.serviceAmount = this.oninput(parseFloat(this.goodsForm.serviceAmount || 0) + parseFloat(item.amount || 0))
          }
        }
      })
      this.calcTotal()
    },
    //计算保险费
    calcInsuredCos() {
      this.goodsForm.insuredCost = this.oninput(parseFloat(this.premiumRate) * parseFloat(this.goodsForm.insuredAmount || 0) / 100)
      this.calcTotal()
    },
    //商品条目改变时
    handleGoodsCategory(row) {
      let goodsCategory = row.goodsCategory
      // Object.assign(row, orderGoodsForm)
      row.goodsCategory = goodsCategory
    },

    querySearchAsync(queryString, cb) {
      // console.log(this.currentGoodsRow)
      getWorkworderGoods({
        goodsCategory: this.currentGoodsRow.goodsCategory,
        englishBrand: this.currentGoodsRow.goodsEnglishBrand,
        goodsName: this.currentGoodsRow.goodsName
      }).then(resp => {
        this.goodsList = resp.data
        let results = queryString ? this.goodsList.filter(item => JSON.stringify(item).toLocaleLowerCase().indexOf(((queryString + '').toLowerCase())) !== -1) : this.goodsList
        cb(results)
      })
    },
    //选择商品
    handleGoodsChange(goods) {
      if (goods) {
        this.currentGoodsRow.goodsName = goods.goodsName
        this.currentGoodsRow.goodsEnglishBrand = goods.englishBrand
        this.currentGoodsRow.goodsType = goods.goodsType
        this.currentGoodsRow.goodsTypeName = goods.goodsTypeName
        this.currentGoodsRow.specification = goods.specification
        this.currentGoodsRow.measureUnit = goods.measureUnit
        this.currentGoodsRow.skuCode = goods.skuCode
        this.currentGoodsRow.id = goods.id
        this.currentGoodsRow.unitPrice = parseFloat(this.oninput(goods.unitPrice))
        this.calcGoodsTotal(this.currentGoodsRow)
      }
    },
    //商品改变时 赋值
    handleGoodsChange1(val) {
      if (!val) {
        return
      }
      if (!this.goodsList.some(item => item.englishBrand === val)) {
        this.currentGoodsRow.userAdded = true
        this.currentGoodsRow.goodsTypeName = '新增商品'
        this.currentGoodsRow.goodsType = 0
        this.currentGoodsRow.id = 0
      }
    },

    calcGoodsTotal(row) {
      row.amount = this.oninput(parseFloat(row.buyNum) * parseFloat(row.unitPrice))
      this.calcTotal()
    },
    //商品信息
    addGoods() {
      this.orderGoods.push(this.cloneObj(orderGoodsForm))
    },
    deleteGoods(index) {
      if (this.orderGoods.length > 1) {
        this.confirm().then(() => {
          this.orderGoods.splice(index, 1)
        })
      } else {
        this.$message.error('删除失败，预购商品至少有一条内容！')
      }
    },
    //发货渠道改变时 查询登机批次
    handleChannelChange(val, deliveryBatchId) {
      if (!val) {
        this.workOrderDeliverForm.deliveryChannelName = ''
        this.handleBatchChange()
        return
      }
      let channel = this.workOrderDeliverFormOptions.deliveryChannel.filter(item => item.id == val)[0]
      if (channel) {
        this.workOrderDeliverForm.deliveryBatchName = channel.name
        let query = {
          pageNum: 1,
          pageSize: 1000,
          channelId: val
        }
        getBoardingBatch(query).then((resp) => {
          this.workOrderDeliverFormOptions.deliveryBatch = resp.data.records
          if (deliveryBatchId) {
            this.handleBatchChange(deliveryBatchId)
          }
        })
      }
    },
    //发货批次改变时
    handleBatchChange(val) {
      if (!val) {
        this.workOrderDeliverForm.deliveryBatchName = ''
        this.workOrderDeliverForm.deliveryBatchId = ''
        return
      }
      let batch = this.workOrderDeliverFormOptions.deliveryBatch.filter(item => item.id == val)[0]
      this.workOrderDeliverForm.deliveryBatchName = batch ? batch.batchName : ''
    },
    //显示隐藏模板下载和导出格式
    handleUploadExcel(name, downType, downFun, isDownload) {
      this.dialogFormVisible1 = true
      this.uploadTitle = name
      this.templateFileType = downType
      this.uploadFun = downFun
      this.isDownload = isDownload
      this.visibleDownload = true
      this.visibleExceltype = false
      this.uploadExcelValue = []
      if (name == '导出运单') {
        this.visibleExceltype = true
        this.uploadExcelValue = this.oparatesOptions.pop_export_type
      } else if (name == '根据单号打印运单') {
        this.uploadExcelValue = this.oparatesOptions.pop_print_type
        this.visibleDownload = false
        this.visibleExceltype = true
      } else if (name == '导出身份证') {
        this.visibleExceltype = true
        this.uploadExcelValue = this.oparatesOptions.pop_idcard_type
      }
    }
  },
  watch: {
    dialogFormVisible1(val) {
      if (!val) {
        this.getWorkworderPage()
      }
    },
    'senderInfoForm.address': {
      handler: function () {
        this.senderInfoForm.address = this.senderInfoForm.address.replace(/\r|\n/ig, '')
      }
    },
    'receiverInfoForm.address': {
      handler: function () {
        this.receiverInfoForm.address = this.receiverInfoForm.address.replace(/\r|\n/ig, '')
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../styles/_themeify";
@import "../../styles/mobile.scss";


.cell-item {
  line-height: 30px;
}

.display-img {
  position: relative;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 60px;
  width: 96px;

  div {
    background: rgba(0, 0, 0, .3);
    height: 60px;
    display: none;
  }

  i {
    font-size: 16px;
    position: absolute;
    top: 5px;
    right: 5px;
  }

  &:hover div {
    display: block;
    z-index: 10000;
  }
}

.audit {
  color: red
}



// 移动端优化
@media screen and (max-width: 768px) {
  .el-dialog {
    .el-tabs {
      padding-top: 20px;

      .el-tabs__header {
        margin-bottom: 10px;
      }

      .el-tabs__item {
        padding: 0 10px !important;
      }
    }

    .el-form {
      .el-row {
        .el-col {
          width: 100% !important;
          margin-bottom: 10px;
        }
      }

      .el-form-item {
        margin-bottom: 10px;

        .el-form-item__label {
          float: none;
          text-align: left;
          padding: 0 0 5px;
        }

        .el-form-item__content {
          margin-left: 0 !important;
        }
      }

      .el-input,
      .el-select,
      .el-cascader {
        width: 100%;
      }

      .el-date-picker {
        width: 100% !important;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .el-dialog {
    .el-form {
      .half-width-mobile {
        width: 50% !important;
        float: left;
        box-sizing: border-box;
        padding-right: 8px;
      }

      .half-width-mobile:nth-child(2n) {
        padding-right: 0;
      }
    }
  }
}

.mobile-goods-list {
  .mobile-goods-item {
    border: 1px solid #EBEEF5;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: #fff;
  }

  .goods-item-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    &.nested { // For rows inside el-col
      margin-bottom: 0;
    }

    .goods-label {
      min-width: 50px; // Adjust as needed
      margin-right: 8px;
      font-size: 13px;
      color: #606266;
    }

    // Ensure inputs and selects in flex items take up space
    .el-input, .el-select, .el-autocomplete, .el-input-number {
      flex-grow: 1;
    }

  }
}

.receiver-choose {
}

</style>


<style lang="scss">
@import "../../styles/_themeify";
@import "../../styles/mobile.scss";

// PC端样式
.dialog-footer {
  position: absolute;
  top: 5px;
  right: 0;

  .el-checkbox {
    margin-right: 10px;
  }

  .el-button {
    margin-left: 10px;
  }
}

// 移动端优化
@media screen and (max-width: 768px) {
  .el-dialog {
    .el-tabs {
      .el-tabs__header {
        margin-bottom: 15px;
      }

      .el-tabs__nav {
        width: 100%;
        display: flex;

        .el-tabs__item {
          flex: 1;
          text-align: center;
          padding: 0 5px !important;
          font-size: 12px;
        }
      }
    }

    .dialog-footer {
      display: flex;
      top: -20px !important;
      left: 0;

      .el-checkbox {
        margin: 0;
      }

      .button-group {
        display: flex;
        gap: 10px;

        .el-button {
          margin: 0;
          padding: 9px 15px;
        }
      }
    }

    .el-form {
      .el-form-item {
        margin-bottom: 10px;

        .el-form-item__label {
          float: none;
          text-align: left;
          padding: 0 0 5px;
        }

        .el-form-item__content {
          margin-left: 0 !important;
        }
      }

      .el-input,
      .el-select,
      .el-cascader {
        width: 100%;
      }
    }
  }

  .search-form {
    .el-form-item {
      width: 100%;
      margin-right: 0;

      .el-input,
      .el-select,
      .el-cascader,
      .el-date-editor {
        width: 100% !important;
      }
    }
  }

  .el-table {
    /deep/ .el-table__row {
      td {
        padding: 5px !important;
      }
    }
  }
}

.cell-item {
  line-height: 25px;
}

.audit {
  color: red;
}
</style>

<!-- 全局样式，提升优先级，确保弹窗表单项宽度为50% -->
<style>
@media screen and (max-width: 768px) {
  .el-dialog .el-form .el-row .el-col.half-width-mobile {
    width: 50% !important;
    float: left !important;
    box-sizing: border-box;
    padding-right: 4px !important;
    margin-bottom: 10px;
  }

  .el-dialog .el-form .el-row .el-col.half-width-mobile:nth-child(2n) {
    padding-right: 5px !important;
  }

  .el-dialog .el-form .el-row .el-col.half-width-mobile .el-form-item,
  .el-dialog .el-form .el-row .el-col.half-width-mobile .el-input,
  .el-dialog .el-form .el-row .el-col.half-width-mobile .el-select,
  .el-dialog .el-form .el-row .el-col.half-width-mobile .el-cascader {
    width: 100% !important;
    box-sizing: border-box;
  }
}
</style>

<style scoped>
.my-header {
  transition: transform 0.3s ease;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: white;
}

/* When app-page has .header-hidden, slide .my-header up */
.app-page.header-hidden .my-header {
  transform: translateY(-100%);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .app-page {
    /* 请根据您的 <my-header> 组件的实际高度调整此值 */
    /* --header-height: 50px; */
    padding-top: var(--header-height);
    transition: padding-top 0.3s ease; /* 平滑过渡 padding */
  }

  .app-page.header-hidden {
    padding-top: 0;
  }

  .el-card {
    margin-top: 0; /* 如果 app-page 处理了 padding, el-card 的 margin-top 可能不再需要为header预留空间 */
  }
}

/* New style for the mobile header toggle button */
.mobile-header-toggle-button {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1001; /* Ensure it's above the header */
}
</style>

<style>
@media print {

  html,
  body {
    height: inherit;
  }
}

.el-notification {
  width: 430px
}

.el-notification__content {
  text-align: left;
}

.margin-top {
  margin-top: 10px
}
</style>
